<template>
    <div class="container">
        <div class="title" v-if="type">
            {{ type == 'hot' ? '今日热点' : '播客推荐' }}
        </div>
        <ul class="track-list">
            <li v-for="(item, index) in recommend" :key="index">
                <a href="#">
                    <div class="left">
                        <img :src="item.albumCoverPath ? item.albumCoverPath : item.coverPath" alt="">
                        <div class="play-btn">
                            <VideoPlay style="width:25px; height: 25px;" />
                        </div>
                    </div>
                    <div class="right">
                        <div class="right-title">{{ item.title }}</div>
                        <div class="right-databoard">
                            <span class="anchor">
                                <User style="width:15px; height: 15px; vertical-align: bottom;" />
                                {{ item.anchorName || item.title.slice(3,7) }}
                            </span>
                            <span class="play-count" v-if="type == 'hot'">
                                <Headset style="width:15px; height: 15px; vertical-align: bottom;" />
                                {{ (item.playCount / 1000).toFixed(2) }}万
                            </span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { VideoPlay, User, Headset } from '@element-plus/icons-vue'

defineProps(['type', 'recommend'])
</script>

<style scoped>
* {
    list-style: none;
    text-decoration: none;
}

.track-list {
    padding-left: 20px;
}

.title {
    color: #333;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
    padding: 10px 20px;
}

.left {
    width: 70px;
    height: 70px;
    margin-right: 15px;
    position: relative;
}

.play-btn {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    line-height: 70px;
    top: 0;
    border-radius: 8px;
    color: #fff;
    background: rgba(0, 0, 0, .3);
}

.left img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

ul li {
    padding: 15px 0;
}

ul li a {
    width: 100%;
    height: 100%;
    display: flex;
}

.right-title {
    font-size: 16px;
    color: #40404c;
    width: 260px;
    height: 45px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    margin-bottom: 5px;
}

.right-databoard {
    font-size: 12px;
    color: #999;
}

.anchor {
    margin-right: 15px;
}
</style>